<template>
  <div class="manufacturer_List">
    <one-title title="外协厂商管理" @refreshData="refresh">
      <div class="mes_btn">
        <el-button @click="showDeleteDialog">
          <i class="iconfont icon-btn_delete"></i>
          删除
        </el-button>
        <el-button @click="_edit">
          <i class="iconfont icon-btn_edit"></i>
          修改
        </el-button>
        <el-button type="success" @click="_add">
          <i class="iconfont icon-btn_addnew"></i>
          新增
        </el-button>
      </div>
    </one-title>
    <mes-search :searchList="searchList"
                @searchInfo="_info"
                :searchResult="searchResult"
                ref="mesSearch"
    ></mes-search>
    <div class="table_container">
      <el-table
        :data="listData.list"
        border
        stripe
        v-loading="isLoading"
        style="width: 100%"
        @sort-change="_sort"
        @selection-change="handleSelectionChange">
        <el-table-column
          width="40"
          type="selection"
          align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="外协单位编号"
          align="center"
          sortable="custom"
          show-overflow-tooltip
          width="165">
          <template slot-scope="scope">
            <router-link :to="{path: 'manufacturerDetail', query: {id: scope.row.id}}" class="jump_item">
              {{scope.row.number}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="外协单位名称"
          align="left"
          sortable="custom"
          show-overflow-tooltip
          width="285">
          <template slot-scope="scope">
            <router-link :to="{path: 'manufacturerDetail', query: {id: scope.row.id}}" class="jump_item">
              {{scope.row.name}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyType"
          label="外协类别"
          align="center"
          show-overflow-tooltip
          width="175">
          <template slot-scope="scope">
            <span>
              <i class="state_icon_color" :class="stateColor(scope.row.typeId)"></i>
              <span>{{scope.row.companyType}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          align="left"
          show-overflow-tooltip
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
          align="left"
          width="350">
        </el-table-column>
        <el-table-column
          prop="remarks"
          :resizable="false"
          label="备注"
          show-overflow-tooltip
          align="left">
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>

export default {
  name: 'manufacturer',
  data() {
    return {
      // 数据加载
      isLoading: true,
      // 选中的表格数据
      selectData: [],
      // 搜索列表数据
      searchData: {},
      // 搜索结果数
      searchResult: NaN,
      // 排序字段
      sortData: {}
    }
  },
  components: {
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.manufacturer.listData
    },
    // 状态更新
    isRefresh() {
      return this.$store.state.manufacturer.isRefresh
    },
    companyType() {
      let companyType = this.$store.state.dict.companyType.labels || []
      return companyType.length > 0 ? [{
        id: '',
        label: '全部'
      }, ...companyType] : companyType
    },
    // 搜索字段
    searchList() {
      let searchList = [
        {
          label: '外协单位编号',
          value: '',
          name: 'number',
          type: 'input'
        },
        {
          label: '外协单位名称',
          value: '',
          name: 'name',
          type: 'input'
        },
        {
          label: '外协类别',
          value: '',
          name: 'typeId',
          type: 'select',
          selectList: this.companyType
        },
        {
          label: '电话',
          value: '',
          name: 'phone',
          type: 'input'
        },
        {
          label: '地址',
          value: '',
          name: 'address',
          type: 'input'
        }]
      return searchList
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 根据id设置不同的外协类别
    stateColor(id) {
      switch (id) {
        case '672bb2d527c54a3189d15f2fdf7bf2cb':
          return 'state_icon_blue'
        case '1a16f41c25f443a2a98eef41ad41079a':
          return 'state_icon_green'
      }
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/company/company/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : 15,
          query: {
            delFlag: 0
          }
        },
        module: 'manufacturer',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 复选框选中的数据
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 新增
    _add() {
      this.$router.push({
        path: 'manufacturerDetail'
      })
    },
    // 删除弹窗提示
    showDeleteDialog() {
      if (this.selectData.length > 0) {
        this.confirmDelete().then(() => {
          this.deleteList()
        })
      } else {
        this.$message({
          type: 'error',
          message: '未选中任何数据',
          duration: 1500,
          center: true
        })
      }
    },
    // 删除
    deleteList() {
      let postData = {
        method: 'post',
        url: 'a/company/company/deleteBatch',
        module: 'manufacturer',
        data: {
          companyList: this.selectData
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功',
          duration: 1500,
          center: true
        })
        this.init()
      })
    },
    // 编辑
    _edit() {
      this.selectData.length === 1 ? this.$router.push({
        path: 'manufacturerDetail',
        query: {
          id: this.selectData[0].id
        }
      }) : this.$message({
        type: 'error',
        message: '请选择一条数据',
        duration: 1500,
        center: true
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    }
  }
}
</script>

<style scoped lang="less">
  .state_icon_color {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bbb;
    color: #fff;
    &.state_icon_line {
      width: 2px;
      border-radius: 0px;
      height: 20px;
    }
    &.state_icon_green {
      background-color: #33cc66;
    }
    &.state_icon_blue {
      background-color: #00b4ff;
    }
  }
</style>
